import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, InputNumber, Button, notification, Switch, Tooltip } from 'antd';
import { FormattedMessage, useIntl } from 'umi';
import request from '@/utils/request';
import { QuestionCircleOutlined } from '@ant-design/icons';

const CateEdit: React.FC<any> = (props) => {
  const [loading, setLoading] = useState(false);
  const formRef = useRef<any>(null);
  const intl = useIntl();

  useEffect(() => {
    fetchData();
  }, [props.cateid, props.parentCate]);

  const fetchData = () => {
    if (props.cateid > 0) {
      setLoading(true);
      request('/api/services/app/Category/get', {
        method: 'GET',
        params: { Id: props.cateid },
      }).then((response) => {
        if (response) {
          if (response.success) {
            formRef.current.setFieldsValue({ category: response.result });
            setLoading(false);
          }
        }
      });
    } else if (props.parentCate.id > 0 && props.cateid === 0) {
      const cateobj = {
        id: props.cateid,
        parentId: props.parentCate.id,
        level: props.parentCate.level + 1,
        layout: props.layout,
      };
      formRef.current.setFieldsValue({ category: cateobj });
    } else {
      const cateobj = {
        id: 0,
        parentId: 0,
        level: 1,
        layout: props.layout,
      };
      formRef.current.setFieldsValue({ category: cateobj });
    }
  };

  const onFinish = (values: any) => {
    setLoading(true);
    const action = values.category.id > 0 ? 'update' : 'create';
    request('/api/services/app/Category/' + action, {
      method: action === 'update' ? 'PUT' : 'POST',
      data: values.category,
    }).then((response) => {
      if (response) {
        if (response.success) {
          notification['success']({
            message: intl.formatMessage({ id: 'pages.notice' }),
            description:
              action === 'create'
                ? intl.formatMessage({ id: 'pages.addSuccess' })
                : intl.formatMessage({ id: 'pages.updateSuccess' }),
          });
          props.RefreshData();
        } else {
          notification['error']({
            message: intl.formatMessage({ id: 'pages.error' }),
            description: intl.formatMessage({ id: 'pages.operationFailed' }),
          });
        }
        setLoading(false);
      }
    });
  };

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  return (
    <Form {...layout} ref={formRef} name="nest-messages" onFinish={onFinish}>
      <Form.Item
        name={['category', 'categoryName']}
        label={<FormattedMessage id="pages.categoryName" />}
        rules={[{ required: true, message: <FormattedMessage id="pages.categoryName.required" /> }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={['category', 'categoryIndex']}
        label={<FormattedMessage id="pages.categoryIndex" />}
        rules={[
          { required: true, message: <FormattedMessage id="pages.categoryIndex.required" /> },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={['category', 'path']}
        label={<FormattedMessage id="pages.path" />}
        hidden={props.layout !== 'Menu'}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={['category', 'component']}
        label={<FormattedMessage id="pages.component" />}
        hidden={props.layout !== 'Menu'}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={['category', 'authority']}
        label={
          <span>
            <Tooltip title={intl.formatMessage({ id: 'pages.authority.tooltip' })}>
              <span>
                <FormattedMessage id="pages.authority" />
              </span>
              &nbsp;
              <QuestionCircleOutlined />
            </Tooltip>
          </span>
        }
        hidden={props.layout !== 'Menu'}
      >
        <Input />
      </Form.Item>
      <Form.Item label={<FormattedMessage id="pages.icon" />} style={{ marginBottom: 0 }}>
        <Input.Group compact>
          <Form.Item name={['category', 'icons']}>
            <Input />
          </Form.Item>
          <Form.Item
            name={['category', 'layout']}
            rules={[{ required: true, message: <FormattedMessage id="pages.layout.required" /> }]}
          >
            <Input disabled={true} style={{ width: 100 }} />
          </Form.Item>
        </Input.Group>
      </Form.Item>
      <Form.Item
        name={['category', 'orderIndex']}
        label={<FormattedMessage id="pages.orderIndex" />}
      >
        <InputNumber />
      </Form.Item>
      <Form.Item
        name={['category', 'isHide']}
        label={<FormattedMessage id="pages.hidden" />}
        valuePropName="checked"
      >
        <Switch />
      </Form.Item>
      <Form.Item name={['category', 'id']} hidden>
        <Input />
      </Form.Item>
      <Form.Item name={['category', 'parentId']} hidden>
        <Input />
      </Form.Item>
      <Form.Item name={['category', 'level']} hidden>
        <Input />
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: layout.labelCol.span }}>
        <Button type="primary" htmlType="submit" loading={loading}>
          <FormattedMessage id="pages.save" />
        </Button>
      </Form.Item>
    </Form>
  );
};

export default CateEdit;
